import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElCard, ElButton, ElSelect, ElOption } from 'element-plus'
import AliIcon from '~/components/AliIocn'
import styles from './../index.module.scss'
import Option from './option'
import Specially from './Specially'

export default defineComponent(function BasestationDelisting() {
  const store = useStore()
  const state = reactive({
    batchNum: [],
    rowsNum: 1,
    batchList: [],
    batchVisible: false,
    speciallyVisible: false,
    id: '',
    SelectListCode: []
  })

  //  搜索
  const handleSearchList = () => {
    index()
  }
  //  重置
  const handleResetting = () => {
    state.batchNum = []
    index()
  }
  //  数据初始化
  const index = async () => {
    //  需求批次卡片
    const batchNum = state.batchNum?.join(',')
    const { code, data } = await store.dispatch('base/GetBasebuildbatchTotalList', {
      batchNum
    })
    if (code === 200) {
      state.batchList = data.records
    }
  }
  //  摘牌详情
  const batchClick = (item: any) => {
    state.id = item.batchNum
    if (item.state === 0) {
      state.speciallyVisible = !state.speciallyVisible
    } else {
      state.batchVisible = !state.batchVisible
    }
  }
  //  特批摘牌详情
  const onHandSpeciallyInfo = (row: any) => {
    state.id = row.batchNum
    state.batchVisible = !state.batchVisible
  }

  //  关键字搜索
  const remoteMethod = async (query: string) => {
    if (query) {
      const { code, data } = await store.dispatch('base/GetSelectBatchNumListBox', {
        batchNum: query
      })
      if (code === 200) {
        state.SelectListCode = data
      } else {
        state.SelectListCode = []
      }
    }
  }

  onMounted(() => {
    index()
  })

  return () => {
    if (state.speciallyVisible) {
      return (
        <Specially
          id={state.id}
          onHandSpeciallyInfo={onHandSpeciallyInfo}
          cancel={() => {
            state.speciallyVisible = !state.speciallyVisible
          }}
        />
      )
    }
    if (state.batchVisible) {
      return (
        <Option
          batchNum={state.id}
          cancel={() => {
            state.batchVisible = !state.batchVisible
          }}
        />
      )
    }
    return (
      <ElCard>
        <div class={styles['delisting-from']}>
          <div class={styles['delisting-from-input']}>
            <ElSelect
              v-model={state.batchNum}
              multiple
              collapse-tags
              collapse-tags-tooltip
              placeholder="需求批次"
              filterable
              remote
              reserve-keyword
              remote-method={remoteMethod}
            >
              {state.SelectListCode?.map((item: string) => (
                <ElOption key={item} label={item} value={item} />
              ))}
            </ElSelect>
          </div>
          <div class={styles['delisting-from-btn']}>
            <ElButton type="primary" onClick={handleSearchList}>
              <AliIcon type="icon-sousuo" />
              &nbsp; 搜索
            </ElButton>
            <ElButton type="primary" plain onClick={handleResetting}>
              <AliIcon type="icon-zhongzhi" />
              &nbsp; 重置
            </ElButton>
          </div>
        </div>
        <ul class={styles['delisting-batch-list']}>
          {state.batchList.map((item: any) => (
            <li class={styles['delisting-batch-item']} onClick={() => batchClick(item)}>
              <div
                class={{
                  [styles['delisting-batch-item-title']]: true,
                  [styles['delisting-batch-item-title-actions']]: item.state === 0,
                  [styles['delisting-batch-item-title-action']]: item.state === 2
                }}
              >
                {item.batchNum}
              </div>
              <div class={styles['delisting-batch-item-cons']}>
                {item.state === 0 && (
                  <p class={styles['delisting-batch-item-cons-p']}>
                    总数量：<span>{item.sum}</span>
                  </p>
                )}
                <p class={styles['delisting-batch-item-cons-p']}>
                  需求数：<span>{item.reqNum}</span>
                </p>
                {item.state !== 0 && (
                  <p class={styles['delisting-batch-item-cons-p']}>
                    匹配数：<span>{item.matchNum}</span>
                  </p>
                )}
                <p class={styles['delisting-batch-item-cons-p']}>
                  摘牌数：<span>{item.delistNum}</span>
                </p>
                <p class={styles['delisting-batch-item-cons-p']}>
                  中标数：<span>{item.baddNum}</span>
                </p>
                <p class={styles['delisting-batch-item-cons-p']}>
                  流标数：<span>{item.abortiveNum}</span>
                </p>
              </div>
            </li>
          ))}
        </ul>
      </ElCard>
    )
  }
})
